<template>
  <div class="market-add-main">
    <NavigationBarBack title="新建群发任务" />
    <el-form 
      ref="form"
      :model="form"
      label-width="120px"
      class="market-add-body"
      label-position="right"
    >
      <div class="config-box">
        <div class="config-tips">
          <el-alert
            type="warning"
            :closable="false"
          >
            <div slot="title" style="font-size: 14px;line-height: 22px;color: rgba(0,0,0,.85);display: flex;">
              <svg-icon icon-class="warning-circle-fill-yellow" style="font-size: 16px;margin-top: 4px;margin-right: 8px;"></svg-icon>
              <div>
                1、发送对象按条件设置发送的定时任务，在实际开始发送前1小时更新确认发送对象<br/>
                2、为避免消息重复发送给客户/客户群，发送过程中某一对象已有员工A发送，则员工B将不会对该对象发送本次群发任务
              </div>
            </div>
          </el-alert>
        </div>
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">基本设置</div>
          </div>
          <div class="card-content">
            <el-form-item label="群发主题：">
              <el-input type="text" placeholder="请输入群发主题，最长15个字" v-model="form.title" maxlength="15" show-word-limit  style="width: 400px;"/>
            </el-form-item>
            <el-form-item label="分组选择：">
              <el-select v-model="form.group" placeholder="全部分组" size="small" style="width: 270px;" >
                <el-option-group
                  v-for="group in options"
                  :key="group.label"
                  :label="group.label">
                  <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
            <el-form-item label="企微号：" prop="pass">
            <el-select v-model="form.company" placeholder="请选择" size="small" style="width: 270px;margin-right: 8px;">
              <el-option
                v-for="item in company"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button plain icon="el-icon-plus" size="small" @click="companyAccountVisible = true">选择企微号</el-button>
          </el-form-item>
          <el-form-item label="群发对象：" prop="pass">
            <el-radio-group v-model="radio">
              <el-radio :disabled="item.disabled" :label="item.id" v-for="(item, index) in sendObject" :key="index">
                {{ item.title }}
                <el-tooltip class="item" effect="dark" placement="top" v-if="item.tips">
                  <div slot="content" v-html="item.tips"></div>
                  <svg-icon icon-class="question-circle-fill"/>
                </el-tooltip>
              </el-radio>
            </el-radio-group>
            <div class="control-content">
              <div class="head">
                <div class="checkbox">
                  <el-checkbox v-model="customer"><span style="color: #000;">客户</span></el-checkbox>
                  <div class="radio-content">
                    <el-radio-group v-model="form.customer">
                      <el-radio :label="0"><span style="color: #000;">所有客户</span></el-radio>
                      <el-radio :label="1"><span style="color: #000;">筛选客户</span></el-radio>
                    </el-radio-group>
                  </div>
                </div>
                <div>
                  <span style="color: #3070ff;cursor: pointer;">点此计算可见客户数</span>
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">此处计算得出的是当前符合所选条件<br/>的客户数，仅供参考，最终触达客<br/>户数以群发后实际触达人数为准</div>
                    <svg-icon icon-class="question" style="margin-left: 4px;"/>
                  </el-tooltip>
                </div>
              </div>
              <div class="body">
                <div class="tc-secondary" style="color:rgba(0,0,0,.25);" v-if="form.customer === 0">
                  <svg-icon icon-class="warning-border"/> 选中企微号的所有客户
                </div>
                <ConditionForm  v-else />
              </div>
            </div>
            <div class="control-content">
              <div class="head">
                <div class="checkbox">
                  <el-checkbox v-model="customer"><span style="color: #000;">客户群</span></el-checkbox>
                  <div class="radio-content">
                    <el-radio-group v-model="form.customerGroup">
                      <el-radio :label="0"><span style="color: #000;">所有客户群</span></el-radio>
                      <el-radio :label="1"><span style="color: #000;">筛选客户群</span></el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </div>
              <div class="body">
                <div class="tc-secondary" style="color:rgba(0,0,0,.25);" v-if="form.customerGroup === 0">
                  <svg-icon icon-class="warning-border"/> 选中企微号的所有客户群
                </div>
                <ConditionGroupForm v-else />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="群发对象：" prop="pass">
              <el-radio-group v-model="radio">
                <el-radio :disabled="item.disabled" :label="item.id" v-for="(item, index) in rosterList" :key="index">
                  {{ item.title }}
                  <el-tooltip class="item" effect="dark" placement="top" v-if="item.tips">
                    <div slot="content" v-html="item.tips"></div>
                    <svg-icon icon-class="question-circle-fill"/>
                  </el-tooltip>
                </el-radio>
              </el-radio-group>
              <span style="margin-left: 30px;color: #3070ff;cursor: pointer;">什么是流失和拉黑好友？</span>
            </el-form-item>
          </div>
        </div>

        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">发送内容设置</div>
          </div>
          <div class="card-content">
            <el-form-item label="群发内容：" prop="pass">
              <material-content ref="material" />
              <div class="alter-tips">
                <el-alert
                  type="warning"
                  :closable="false"
                  show-icon>
                  <div slot="title" style="font-size: 14px;line-height: 22px;color: rgba(0,0,0,.85);">
                    请控制好 视频/图片/文件 的大小，以免消息间隔过短的时候出现乱序，先压缩后再发送
                  </div>
                </el-alert>
              </div>
            </el-form-item>
          </div>
        </div>

        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">异常管理</div>
          </div>
          <div class="card-content">
            <el-form-item label="群发内容：" prop="pass">
              <el-radio-group v-model="form.checkRadio">
                <el-radio :label="0" class="flex-group-center">
                  <div class="radio-title">全部失败自动暂停</div>
                  <div class="radio-desc">对象中所有消息都监测到发送失败（包含频繁/超时等），累计三个对象任务自动暂停，暂停重新开启后清零重计。</div>
                </el-radio>
                <el-radio :label="1" class="flex-group-center">
                  <div class="radio-title">任一失败自动暂停</div>
                  <div class="radio-desc">对象中只要有一条消息监测到发送失败（包含频繁/超时等），累计三个对象任务自动暂停，暂停重新开启后清零重计</div>
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>

        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">时间设置</div>
          </div>
          <div class="card-content">
            <el-form-item label="发送设置：" prop="pass">
              <span style="color: rgba(0, 0, 0, .65);font-size: 14px;">多号模式下创建的群发任务，实际发送间隔按照各企微号的发送设置执行。</span>
              <el-button size="small">修改发送设置</el-button>
            </el-form-item>
            <el-form-item label="发送时间：" prop="pass">
              <el-radio-group v-model="form.sendTime">
                <el-radio :label="0"><span style="color: #000;font-weight: 400;">立即发送</span></el-radio>
                <el-radio :label="1"><span style="color: #000;font-weight: 400;">单次定时</span></el-radio>
                <el-radio :label="2"><span style="color: #000;font-weight: 400;">每天循环</span></el-radio>
                <el-radio :label="3"><span style="color: #000;font-weight: 400;">每周循环</span></el-radio>
                <el-radio :label="4"><span style="color: #000;font-weight: 400;">每月循环</span></el-radio>
              </el-radio-group>
              <div class="alter-box">
                <div class="warning-svg">
                  <svg-icon class-name="warning-svg" icon-class="warning" />
                </div>
                <div class="waring-text">
                  <div>1、因同步至单号处理数据需要时间，发送时间设置需在5分钟后，30天内；</div>
                  <div>2、此处群发任务创建后会即时下发至各个企微号，实际发送按照设置的发送时间开始发送。</div>
                </div>
              </div>
              <div class="datetime-wrap" v-if="form.sendTime != 0">
                <div v-if="form.sendTime === 1">
                  <div class="send-time-content">
                  <div class="label">发送时间：</div>
                  <el-date-picker
                    type="datetime"
                    size="small"
                    style="width: 174px;"
                    placeholder="选择日期时间">
                  </el-date-picker>
                </div>
                </div>
                <div v-if="form.sendTime === 2">
                  <div class="send-time-content">
                    <div class="label">每天发送时间：</div>
                    <el-time-picker
                      placeholder="请选择时间">
                    </el-time-picker>
                  </div>
                  <div class="send-time-content">
                    <div class="label">循环是否截止：</div>
                    <el-radio-group>
                      <el-radio :label="0"><span style="color: #000;font-weight: 400;">不截止</span></el-radio>
                      <el-radio :label="1"><span style="color: #000;font-weight: 400;">截止</span></el-radio>
                    </el-radio-group>
                  </div>
                </div>
                <div v-if="form.sendTime === 3">
                  <div class="send-time-content">
                    <div class="label">每周发送时间：</div>
                    <SelectDateTime size="small" width="240px" :receiveList="weekList"/>
                    <el-time-picker
                      size="small"
                      placeholder="请选择时间"
                      style="width: 128px;margin-left: 8px"
                    >
                    </el-time-picker>
                  </div>
                  <div class="send-time-content">
                    <div class="label">循环是否截止：</div>
                    <el-radio-group>
                      <el-radio :label="0"><span style="color: #000;font-weight: 400;">不截止</span></el-radio>
                      <el-radio :label="1"><span style="color: #000;font-weight: 400;">截止</span></el-radio>
                    </el-radio-group>
                  </div>
                </div>
                <div v-if="form.sendTime === 4">
                  <div class="send-time-content">
                    <div class="label">每月发送时间：</div>
                    <SelectDateTime size="small" width="240px" :receiveList="monthsList"/>
                    <el-time-picker
                      size="small"
                      placeholder="请选择时间"
                      style="width: 128px;margin-left: 8px"
                      >
                    </el-time-picker>
                  </div>
                  <div class="send-time-content">
                    <div class="label">循环是否截止：</div>
                    <el-radio-group>
                      <el-radio :label="0"><span style="color: #000;font-weight: 400;">不截止</span></el-radio>
                      <el-radio :label="1"><span style="color: #000;font-weight: 400;">截止</span></el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form >
    <CheckCompanyAccount :visible="companyAccountVisible" @handCloseDialog="onHandCloseAccounteDialog"  />
  </div>
</template>
<script>
import MaterialContent from "@/components/MaterialContent";
import NavigationBarBack from '@/components/NavigationBarBack'
import ConditionForm from '../components/conditionForm'
import ConditionGroupForm from '../components/conditionGroupForm'
import SelectDateTime from '../components/selectDateTime.vue'
import CheckCompanyAccount from '../components/CheckCompanyAccount'
export default {
  data() {
    return {
      companyAccountVisible: false,
      form: {
        title: '',
        group: 0,
        company: 1,
        customer: 0,
        customerGroup: 0,
        checkRadio: 0,
        sendTime: 3,
        isEnd: false,
      },
      options: [{
        options: [{
          value: 0,
          label: '默认分组'
        }]
      }, {
        options: [{
          value: 1,
          label: '分组管理'
        }]
      }],
      company: [{
        value: 1,
        label: '志新'
      }, {
        value: 2,
        label: '锐安'
      }],
      sendObject: [
        {id: 1, title: '按客户/客户群发送', disabled: true, },
        {id: 2, title: '按条件设置发送', disabled: false, tips: '按条件设置发送，复制或者循环群发时<br/>每次创建任务发送对象根据筛选条<br/>件变化（符合条件的对象会增加或减<br/>少）'}
      ],
      customer: true,
      conditionList:[
        {},
      ],
      keyWords: [
        {id: 1, name: '含任意关键词'},
        {id: 2, name: '含所有关键词'},
      ],
      keyTags: [
        {id: 1, name: '含任意标签'},
        {id: 2, name: '含所有标签'},
        {id: 3, name: '未打任何标签'},
      ],
      remarks: [
        {id: 1, name: '无备注'},
        {id: 2, name: '有备注'},
      ],
      gender: [
        {id: 1, name: '男'},
        {id: 2, name: '女'},
        {id: 3, name: '未知'},
      ],
      rosterList: [
        {id: 1, title: '不发送', disabled: false, tips: '过滤单向好友中的流失和拉黑好友，<br/>未验证好友不过滤'},
        {id: 2, title: '发送', disabled: false, }
      ],
      weekList: [
        {value: '1', label: '周一'},
        {value: '2', label: '周二'},
        {value: '3', label: '周三'},
        {value: '4', label: '周四'},
        {value: '5', label: '周五'},
        {value: '6', label: '周六'},
        {value: '7', label: '周日'},
      ],
      monthsList: [
        {value: '1', label: '1'},
        {value: '2', label: '2'},
        {value: '3', label: '3'},
        {value: '4', label: '4'},
        {value: '5', label: '5'},
        {value: '6', label: '6'},
        {value: '7', label: '7'},
        {value: '8', label: '8'},
        {value: '9', label: '9'},
        {value: '10', label: '10'},
        {value: '11', label: '11'},
        {value: '12', label: '12'},
        {value: '13', label: '13'},
        {value: '14', label: '14'},
        {value: '15', label: '15'},
        {value: '16', label: '16'},
        {value: '17', label: '17'},
        {value: '18', label: '18'},
        {value: '19', label: '19'},
        {value: '20', label: '20'},
        {value: '21', label: '21'},
        {value: '22', label: '22'},
        {value: '23', label: '23'},
        {value: '24', label: '24'},
        {value: '25', label: '25'},
        {value: '26', label: '26'},
        {value: '27', label: '27'},
        {value: '28', label: '28'},
        {value: '29', label: '29'},
        {value: '30', label: '30'},
        {value: '31', label: '31'},
      ]
    }
  },
  components: {
    NavigationBarBack,
    ConditionForm,
    ConditionGroupForm,
    MaterialContent,
    SelectDateTime,
    CheckCompanyAccount
  },
  methods: {
    onHandCloseAccounteDialog () {
      this.companyAccountVisible = false
    }
  },
}
</script>
<style lang="scss" scoped>
.market-add-main {
  height: calc(100vh - 48px);
  overflow: auto;
  flex: 1 1;
  position: relative;
  .market-add-body {
    margin: 12px 12px 76px;
    .config-box {
      margin: 0 auto;
      width: 1000px;
      display: flex;
      flex-direction: column;
      .config-settig-card {
        background: #ffffff;
        margin-top: 12px;
        flex: 1 1;
        text-align: left;
        text-align: initial;
        color: rgba(0, 0, 0, 0.85);
        border-radius: 4px;
        background: #fff;
        font-size: 14px;
        .card-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e9e9e9;
          .card-title {
            padding: 16px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
          }
          .tips-text {
            display: block;
            color: rgb(47, 84, 235);
            cursor: pointer;
            font-size: 12px;
            font-weight: 400;
            margin-right: 20px;
          }
        }
        .card-content {
          padding: 20px 20px 20px 12px;
          font-size: 14px;
          line-height: 22px;
          .control-content {
            width: calc(100% - 150px);
            color: rgba(0, 0, 0, .65);
            font-size: 14px;
            font-variant: tabular-nums;
            line-height: 1.5715;
            margin-top: 20px;
            .head {
              display: flex;
              align-items: center;
              justify-content: space-between;
              height: 46px;
              background: #f5f6f7;
              border-radius: 2px;
              border: 1px solid #e9e9e9;
              padding: 0 16px;
              .checkbox {
                display: flex;
                align-items: center;
                .radio-content {
                  margin-left: 24px;
                  padding: 4px 16px;
                  border-radius: 16px;
                  background-color: #fff;
                  border: 1px solid #e9e9e9;
                }
              }
            }
            .body {
              padding: 16px;
              line-height: 22px;
              border: 1px solid #e9e9e9;
              border-top: none;
              .form-card {
                .header {
                  height: 48px;
                  padding: 0 12px;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  background: #fff;
                  border: 1px solid #f0f0f0;
                  border-radius: 4px 4px 0 0;
                  .flex-btns {
                    display: grid;
                    column-gap: 8px;
                    grid-template-columns: 22px 22px;
                    .ic-btn {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      border: 2px solid #3070ff;
                      font-weight: bold;
                      height: 22px;
                      color: #3070ff;
                    }
                  }
                }
                .card-wrap {
                  padding: 16px;
                  background: #f9f9f9;
                }
              }
            }
          }
          .flex-group-center {
            display: flex;
            &:not(:first-child) {
              margin-top: 8px;
            }
            .radio-title{
              font-size: 14px;
              font-weight: 600;
              color: rgba(0, 0, 0, .85);
              line-height: 22px;
              margin-bottom: 0;
            }
            .radio-desc {
              font-size: 12px;
              font-weight: 400;
              color: rgba(0, 0, 0, .45);
              line-height: 20px;
              margin-bottom: 0;
              margin-top: 4px;
            }
          }
          .alter-tips {
            margin-top: 20px;
          }
          .alter-box {
            box-sizing: border-box;
            color: rgba(0, 0, 0, .65);
            font-size: 14px;
            background-color: #f0f7ff;
            border: 1px solid #abceff;
            font-variant: tabular-nums;
            line-height: 24px;
            position: relative;
            display: flex;
            padding: 8px 15px;
            word-wrap: break-word;
            border-radius: 4px;
            margin-top: 12px;
            .warning-svg {
              font-size: 18px;
            }
            .waring-text {
              margin-left: 8px;
            }
          }
          .datetime-wrap {
            background: #f7f7f7;
            border: 1px solid #e9e9e9;
            padding: 16px;
            margin-top: 8px;
            .send-time-content {
              display: flex;
              align-items: center;
              &:not(:first-child) {
                margin-top: 20px;
              }
            }
          }
        }
      }
    }
  }
}

::v-deep .el-form-item .el-form-item {
  margin-bottom: 16px;
}
::v-deep .el-input-group__append {
  padding: 0 10px;
}
.flex-group-center ::v-deep .el-radio__input {
  margin-top: 4px;
}
</style>